<template>
	<view class="container">
		<view class="header nav-header" :style="{backgroundImage:'url('+tui.website+'static/home/img/topbg4.png)',paddingTop:top+'px'}">
			<view class="page-title" style="color: #FFF;">
				<view class="back-btn">
					<tui-icon name="arrowleft" color="#fff" @click="back"></tui-icon>
				</view>
				<text>选择客户</text>
			</view>
		</view>
		<view class="search" :style="{marginTop:(49+top)+'px'}">
			<view class="" style="width: 70%">
				<view class="searchbox">
					<view class="tui-input-title pull-left">						
					<tui-icon name="search-2" :size="40" unit="rpx" color="#a4a4a4"></tui-icon></view>
					<input placeholder-style="color: #a4a4a4;font-size:28upx"  @confirm="searchUser" value="" confirm-type="search" type="text" class="tui-input pull-left" placeholder="搜索客户名/手机号" v-model="kw" placeholder-class="tui-phcolor" />
				</view>
			</view>
			<view class="" style="padding: 20upx;color: #a4a4a4;font-size: 26upx;">共{{total}}条</view>
		</view>
		<!--内容部分-->
		<view class="mycard">
			<tui-list-cell v-for="(item ,idx) in lists" :lineLeft="false" @click="itemClick(item.id)">
				<view class="tui-item-box">
					<view class="tui-msg-box">
						<view class="tui-msg-item">
							<view class="tui-msg-name">{{item.username}}</view>
							<view class="tui-msg-content">{{item.mobile}}</view>
						</view>
					</view>
					<view class="tui-msg-right">
						<view class="tui-msg-time">上次消费：{{item.last}}</view>
					</view>
				</view>
			</tui-list-cell>
		</view>
			
		<!--内容部分-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				top:0,
				pullUpOn:true,
				next:true,
				page:1,
				kw:'',
				total:0,
				lists:[
				],
			}
		},
		onLoad() {
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif
			uni.getSystemInfo({
				success: (res) => {
					this.width = obj.left || res.windowWidth;
					this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44);
					this.top = obj.top ? (obj.top + (obj.height - 32) / 2) : (res.statusBarHeight + 6);
					// this.scrollH = res.windowWidth * 0.6
				}
			})
		},
		onShow() {
			this.tui.chkAuth();
			this.getData();
		},
		methods: {
			back(){
				uni.navigateBack();
			},
			detail: function() {
				this.tui.toast("click~")
			},
			searchUser(){
				this.lists=[];
				this.page=1;
				this.next=true;
				this.getData();
			},
			getData(){
				if (!this.pullUpOn) return;
				if (!this.next) {
					this.tui.toast('没有更多的信息了');
					return;
				};
				uni.showLoading();
				let it =this;
				this.pullUpOn =false;
				this.tui.get('user/api/memberlist',{page:this.page,kw:this.kw}).then(function(res){
					it.lists =[...it.lists,...res.data.data];
					it.total = res.data.total;
					if(res.data.current_page >= res.data.last_page){
						it.next = false;
					}
					it.pullUpOn=true;
					it.page++;
					uni.hideLoading();
				});
			},
			itemClick(id){
				uni.navigateTo({
					url:"../order?mid="+id
				})
			},
			onReachBottom: function() {
				this.getData();
			}
		}
	}
</script>

<style>
	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-item-box {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.tui-list-cell_name {
		padding-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-ml-auto {
		margin-left: auto;
	}

	.tui-right {
		margin-left: auto;
		margin-right: 34rpx;
		font-size: 26rpx;
		color: #999;
	}

	.tui-logo {
		height: 52rpx;
		width: 52rpx;
		flex-shrink: 0;
	}

	.tui-flex {
		display: flex;
		align-items: center;
	}

	.tui-msg-box {
		display: flex;
		align-items: center;
	}

	.tui-msg-pic {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: block;
		margin-right: 24rpx;
		flex-shrink: 0;
	}

	.tui-msg-item {
		max-width: 500rpx;
		min-height: 80rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.tui-msg-name {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 34rpx;
		line-height: 1;
		color: #262b3a;
	}

	.tui-msg-content {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 26rpx;
		line-height: 1;
		color: #9397a4;
	}

	.tui-msg-right {
		max-width: 280rpx;
		height: 88rpx;
		margin-left: auto;
		text-align: right;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.tui-right-dot {
		height: 76rpx !important;
		padding-bottom: 10rpx !important;

	}

	.tui-msg-time {
		width: 100%;
		font-size: 28rpx;
		line-height: 28rpx;
		color: #9397a4;
		display: block;
	}
	.search{
		height:90upx;padding: 40upx 20upx 20upx;
		display: flex;
		background-color: #FFFFFF;
	}
	.search .searchbox{
		display: block;border-radius: 80upx;padding: 16upx 0 16upx 40upx;
		background: #f6f6f6;overflow: auto;
	}
	.search .tui-input-title{width: 40upx;display: inline-block;min-width: 40upx;}
	.search .tui-input{display: inline-block;font-size: 28upx;width: 400upx;}
</style>
